<!-- templates/video_library.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频库 - 花艺AI测试应用</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body { padding-top: 2rem; }
        .header { margin-bottom: 2rem; }
        .library-container { max-width: 1200px; margin: 0 auto; }
        .video-card { border-radius: 10px; overflow: hidden; margin-bottom: 20px; transition: transform 0.2s; }
        .video-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .video-thumbnail { position: relative; height: 180px; overflow: hidden; }
        .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
        .video-duration { position: absolute; bottom: 10px; right: 10px; background-color: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
        .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255,255,255,0.8); color: #6f42c1; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; opacity: 0; transition: opacity 0.2s; }
        .video-thumbnail:hover .video-play-button { opacity: 1; }
        .filters-bar { background-color: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; }
        .empty-library { text-align: center; padding: 50px 20px; background-color: #f8f9fa; border-radius: 10px; }
        .empty-library i { font-size: 3rem; color: #6c757d; margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header text-center">
            <h1>花艺AI测试应用</h1>
            <p class="lead">视频库</p>
            <nav class="nav justify-content-center">
                <a class="nav-link" href="/">首页</a>
                <a class="nav-link" href="/upload">上传知识</a>
                <a class="nav-link" href="/image">生成图像</a>
                <a class="nav-link" href="/speech">语音交互</a>
                <a class="nav-link" href="/video/list">视频库</a>
                <a class="nav-link" href="/status">系统状态</a>
            </nav>
        </div>

        <div class="library-container">
            <!-- 顶部操作区 -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3><i class="bi bi-collection-play"></i> 花艺教学视频库</h3>
                <a href="/video/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> 创建新视频
                </a>
            </div>
            
            <!-- 筛选区 -->
            <div class="filters-bar mb-4">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" id="search-input" placeholder="搜索视频...">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="style-filter">
                            <option value="">所有角色风格</option>
                            <option value="anime">动漫风格</option>
                            <option value="realistic">写实风格</option>
                            <option value="painting">绘画风格</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="duration-filter">
                            <option value="">所有时长</option>
                            <option value="short">短视频 (≤30秒)</option>
                            <option value="medium">中等 (31-60秒)</option>
                            <option value="long">长视频 (>60秒)</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-outline-secondary w-100" id="reset-filters">
                            重置筛选
                        </button>
                    </div>
                </div>
            </div>
            
            {% if videos and videos|length > 0 %}
            <!-- 视频列表 -->
            <div class="row" id="video-list">
                {% for video in videos %}
                <div class="col-md-4 col-sm-6 video-item" 
                     data-style="{{ video.character_style }}"
                     data-duration="{{ video.duration }}">
                    <div class="card video-card">
                        <div class="video-thumbnail">
                            <img src="{{ video.thumbnail_url }}" alt="视频缩略图">
                            <div class="video-duration">{{ video.duration | round(1) }}秒</div>
                            <a href="/video/view/{{ video.id }}" class="video-play-button">
                                <i class="bi bi-play-fill"></i>
                            </a>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">{{ video.topic if hasattr(video, 'topic') else '花艺教学视频' }}</h5>
                            <p class="card-text text-muted">
                                <small>
                                    <i class="bi bi-calendar3"></i> {{ video.created_at.split(' ')[0] if hasattr(video, 'created_at') else '' }}
                                    &nbsp;|&nbsp;
                                    <i class="bi bi-person"></i> {{ video.character_style | capitalize if hasattr(video, 'character_style') else '' }}
                                </small>
                            </p>
                        </div>
                        <div class="card-footer bg-transparent d-flex justify-content-between">
                            <a href="/video/view/{{ video.id }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-play-fill"></i> 播放
                            </a>
                            <a href="{{ video.video_url }}" class="btn btn-sm btn-outline-success" download>
                                <i class="bi bi-download"></i> 下载
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <!-- 空库提示 -->
            <div class="empty-library">
                <i class="bi bi-film"></i>
                <h4>视频库还是空的</h4>
                <p>您还没有生成任何花艺教学视频，点击下方按钮创建第一个视频。</p>
                <a href="/video/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> 创建新视频
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 筛选功能
            const searchInput = document.getElementById('search-input');
            const styleFilter = document.getElementById('style-filter');
            const durationFilter = document.getElementById('duration-filter');
            const resetFiltersBtn = document.getElementById('reset-filters');
            const videoItems = document.querySelectorAll('.video-item');
            
            // 筛选视频
            function filterVideos() {
                const searchTerm = searchInput.value.toLowerCase();
                const styleValue = styleFilter.value;
                const durationValue = durationFilter.value;
                
                videoItems.forEach(item => {
                    const title = item.querySelector('.card-title').textContent.toLowerCase();
                    const style = item.getAttribute('data-style');
                    const duration = parseFloat(item.getAttribute('data-duration'));
                    
                    // 检查是否匹配搜索词
                    const matchesSearch = !searchTerm || title.includes(searchTerm);
                    
                    // 检查是否匹配风格
                    const matchesStyle = !styleValue || style === styleValue;
                    
                    // 检查是否匹配时长
                    let matchesDuration = true;
                    if (durationValue === 'short') {
                        matchesDuration = duration <= 30;
                    } else if (durationValue === 'medium') {
                        matchesDuration = duration > 30 && duration <= 60;
                    } else if (durationValue === 'long') {
                        matchesDuration = duration > 60;
                    }
                    
                    // 显示或隐藏
                    if (matchesSearch && matchesStyle && matchesDuration) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 检查是否有可见的视频项
                const hasVisibleVideos = Array.from(videoItems).some(item => item.style.display !== 'none');
                
                // 显示/隐藏"无结果"消息
                const videoList = document.getElementById('video-list');
                const noResultsMsg = document.getElementById('no-results-message');
                
                if (!hasVisibleVideos && !noResultsMsg) {
                    // 创建"无结果"消息
                    const messageDiv = document.createElement('div');
                    messageDiv.id = 'no-results-message';
                    messageDiv.className = 'col-12 text-center py-5';
                    messageDiv.innerHTML = `
                        <i class="bi bi-search" style="font-size: 2rem; color: #6c757d;"></i>
                        <h4 class="mt-3">没有找到匹配的视频</h4>
                        <p>尝试使用不同的搜索词或筛选条件</p>
                    `;
                    videoList.appendChild(messageDiv);
                } else if (hasVisibleVideos && noResultsMsg) {
                    // 移除"无结果"消息
                    noResultsMsg.remove();
                }
            }
            
            // 重置筛选
            function resetFilters() {
                searchInput.value = '';
                styleFilter.value = '';
                durationFilter.value = '';
                
                videoItems.forEach(item => {
                    item.style.display = 'block';
                });
                
                // 移除"无结果"消息
                const noResultsMsg = document.getElementById('no-results-message');
                if (noResultsMsg) {
                    noResultsMsg.remove();
                }
            }
            
            // 绑定事件
            searchInput.addEventListener('input', filterVideos);
            styleFilter.addEventListener('change', filterVideos);
            durationFilter.addEventListener('change', filterVideos);
            resetFiltersBtn.addEventListener('click', resetFilters);
        });
    </script>
</body>
</html>
